<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-select v-model="selectClubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in optionsSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>

      </el-select>
      <el-input
        placeholder="请输入申请人名称"
        v-model="stuName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getApplicantList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码"
        width="150">
      </el-table-column>
      <el-table-column
        prop="grade"
        label="年级"
        width="150">
      </el-table-column>
      <el-table-column
        prop="club_name"
        label="社团"
        width="150">
      </el-table-column>
      <el-table-column
        prop="association"
        label="所属组织"
        width="150">
      </el-table-column>
      <el-table-column
        label="申请时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getDateTime(scope.row.apply_time)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="申请状态"
        width="150">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.join_club_status==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.join_club_status==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.join_club_status==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.join_club_status==3">禁用中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="250">
        <template slot-scope="scope">
          <!--          <el-button @click="handleClick(scope.row.createUserId)" type="text" size="small">查看创建人</el-button>-->
<!--          <el-button type="text" size="small" @click="verify(scope.row)" :disabled="scope.row.join_club_status!=0">审核-->
          <el-button type="text" size="small" @click="verify(scope.row)" >审核

          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeClubList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-select v-model="clubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateStu">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {auditStu, getApplicantPageList} from "../../../api/club";
  import {getDateTime1} from "../../../utils/dateTimeUtil";

  export default {
    name: "MemberManager",
    data() {
      return {
        dialogVisible: false,
        options: [{
          value: 0,
          label: '待审核'
        }, {
          value: 1,
          label: '审核通过'
        }, {
          value: 2,
          label: '不通过'
        }, {
          value: 3,
          label: '禁用'
        }],
        clubStatusValue: 0,
        page: {
          total: 2,
          current: 1,
          records: [],
          pages: 2,
        },
        selectedStu: null,
        selectClubStatusValue: -1,
        optionsSelect: [{
          value: -1,
          label: '全部'
        }, {
          value: 0,
          label: '待审核'

        }, {
          value: 1,
          label: '审核通过'
        }, {
          value: 2,
          label: '不通过'
        }, {
          value: 3,
          label: '禁用'
        }],
        stuName: null,
      }
    }
    ,
    created() {
      this.getApplicantList();
    }
    ,
    methods: {
      changeClubList(val) {
        console.log(val)
        this.page.current = val;
        this.getApplicantList();
      }
      ,
      getApplicantList() {
        console.log(this.$route.params.clubId)
        getApplicantPageList({
          clubId:this.$route.params.clubId,
          status: this.selectClubStatusValue,
          currentPage: this.page.current,
          stuName: this.stuName
        }).then(res => {
          console.log(res.data)
          this.page = res.data;
          console.log(this.page.pages)
        })
      }
      ,
      handleClose() {
        this.dialogVisible = false;
      }
      ,
      verify(val) {
        console.log(val)
        this.selectedStu = val;
        this.dialogVisible = true;
        this.clubStatusValue = val.join_club_status;
      },
      updateStu() {
        this.dialogVisible = false;
        auditStu({
          joinClubId: this.selectedStu.join_club_id,
          joinClubStatus: this.clubStatusValue
        }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: "操作成功"
              });
            }
          this.getApplicantList();
        })
      },
      getDateTime(val) {
        return getDateTime1(val);
      }
    }

  }
</script>

<style scoped>

</style>
